
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>实例方法 - vue.js</title>
        <meta charset="utf-8">
        <meta name="description" content="Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces.">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <!-- <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Source+Code+Pro|Dosis:300,500' rel='stylesheet' type='text/css'> -->
        <link rel="icon" href="/images/logo.png" type="image/x-icon">
        <script>
            window.PAGE_TYPE = "api"
        </script>
        <link rel="stylesheet" href="/css/page.css" type="text/css">
        <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-46852172-1', 'vuejs.org');
  ga('send', 'pageview');
</script>
        <script src="/js/vue.js"></script>
    </head>
    <body>
        <div id="mobile-bar">
            <a class="menu-button"></a>
            <a class="logo" href="/"></a>
        </div>
        
            <div id="header">
    <a id="logo" href="/">
        <img src="/images/logo.png">
        <span>Vue.js</span>
    </a>
    <ul id="nav">
        <li>
  <form id="search-form">
    <input type="text" id="search-query" class="st-default-search-input">
  </form>
</li>
<li><a href="/guide/" class="nav-link">教程</a></li>
<li><a href="/api/" class="nav-link current">API</a></li>
<li><a href="/examples/" class="nav-link">示例</a></li>
<li><a href="/blog/" class="nav-link">Blog</a></li>
<li><a href="https://github.com/yyx990803/vue" target="_blank" class="nav-link">GitHub</a></li>

    </ul>
</div>
            <div id="main">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li>
  <form id="search-form">
    <input type="text" id="search-query" class="st-default-search-input">
  </form>
</li>
<li><a href="/guide/" class="nav-link">教程</a></li>
<li><a href="/api/" class="nav-link current">API</a></li>
<li><a href="/examples/" class="nav-link">示例</a></li>
<li><a href="/blog/" class="nav-link">Blog</a></li>
<li><a href="https://github.com/yyx990803/vue" target="_blank" class="nav-link">GitHub</a></li>

    </ul>
    <div class="list">
        <h2>Api</h2>
        <ul class="menu-root">
            
                <li>
                    <a href="/api/index.html" class="sidebar-link">概述</a>
                </li>
            
                <li>
                    <a href="/api/options.html" class="sidebar-link">组件选项</a>
                </li>
            
                <li>
                    <a href="/api/instance-properties.html" class="sidebar-link">实例属性</a>
                </li>
            
                <li>
                    <a href="/api/instance-methods.html" class="sidebar-link current">实例方法</a>
                </li>
            
                <li>
                    <a href="/api/global-api.html" class="sidebar-link">全局 API</a>
                </li>
            
                <li>
                    <a href="/api/directives.html" class="sidebar-link">指令</a>
                </li>
            
                <li>
                    <a href="/api/filters.html" class="sidebar-link">过滤器</a>
                </li>
            
                <li>
                    <a href="/api/elements.html" class="sidebar-link new">特殊元素</a>
                </li>
            
            <li><a href="http://legacy.vuejs.org">旧版 0.11 文档</a></li>
            <li style="margin:10px 0 3px">
              <script data-gittip-username="yyx990803"
                data-gittip-widget="button"
                src="//gttp.co/v1.js"></script>
            </li>
        </ul>
    </div>
</div>


<div class="content api with-sidebar">
    <h1>实例方法</h1>
    <div id="ad">
        <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=vuejs" id="_carbonads_js"></script>
    </div>
    <h2 id="数据">数据</h2><blockquote>
<p>你可以在 Vue 实例中监视数据的变化。需要注意的是，所有的 watch 回调都是异步发生的，而且这些回调和指令一样被进行了异步批量处理。这就意味着如果一份数据在同一个事件循环 (event loop) 中多次变化，只会以最后一个值触发一次回调。</p>
</blockquote>
<h3 id="vm-$watch(_expOrFn,_callback,_[options]_)">vm.$watch( expOrFn, callback, [options] )</h3><ul>
<li><strong>expOrFn</strong> <code>String|Function</code></li>
<li><strong>callback( newValue, oldValue )</strong> <code>Function</code></li>
<li><strong>options</strong> <code>Object</code> <em>optional</em><ul>
<li><strong>deep</strong> <code>Boolean</code></li>
<li><strong>immediate</strong> <code>Boolean</code></li>
<li><strong>sync</strong> <code>Boolean</code></li>
</ul>
</li>
</ul>
<p>在当前 Vue 实例上监听一个表达式或是一个计算函数的值。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">vm.$watch(<span class="string">'a + b'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">newVal, oldVal</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// do something</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// or</span></span><br><span class="line">vm.$watch(</span><br><span class="line">  <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.a + <span class="keyword">this</span>.b</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="keyword">function</span> (<span class="params">newVal, oldVal</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// do something</span></span><br><span class="line">  &#125;</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
<p>如果要监视在对象中深层嵌套的属性变化，需要在 <code>options</code> 参数里传递 <code>deep: true</code> 来启用深度数据观察。注意在监听数组本身结构变化 (mutations) 的时候不需要此参数。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">vm.$watch(<span class="string">'someObject'</span>, callback, &#123;</span><br><span class="line">  deep: <span class="literal">true</span></span><br><span class="line">&#125;)</span><br><span class="line">vm.someObject.nestedValue = <span class="number">123</span></span><br><span class="line"><span class="comment">// 回调被触发</span></span><br></pre></td></tr></table></figure>
<p>如果在 <code>options</code> 参数里加上 <code>immediate: true</code>，那么回调会带着现在表达式的结果被立即触发。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">vm.$watch(<span class="string">'a'</span>, callback, &#123;</span><br><span class="line">  immediate: <span class="literal">true</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 回调使用现在表达式的结果 `a` 被立刻触发</span></span><br></pre></td></tr></table></figure>
<p>最后，<code>vm.$watch</code> 会返回一个停止数据观察的句柄函数。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> unwatch = vm.$watch(<span class="string">'a'</span>, cb)</span><br><span class="line"><span class="comment">// 停止观察</span></span><br><span class="line">unwatch()</span><br></pre></td></tr></table></figure>
<h3 id="vm-$get(_expression_)">vm.$get( expression )</h3><ul>
<li><strong>expression</strong> <code>String</code></li>
</ul>
<p>为 Vue 实例传递一个表达式来获得结果，如果表达式抛错，该错误会被截获并返回 <code>undefined</code>。</p>
<h3 id="vm-$set(_keypath,_value_)">vm.$set( keypath, value )</h3><ul>
<li><strong>keypath</strong> <code>String</code></li>
<li><strong>value</strong> <code>*</code></li>
</ul>
<p>通过给 Vue 实例传递一个可用的路径来设置结果，如果路径不存在那么会被递归创建。 </p>
<h3 id="vm-$add(_key,_value_)">vm.$add( key, value )</h3><ul>
<li><strong>key</strong> <code>String</code></li>
<li><strong>value</strong> <code>*</code></li>
</ul>
<p>为 Vue 实例及其 <code>$data</code> 对象添加一个顶层属性 (root level property)。由于 ES5 的限制，Vue 无法侦测到对象中属性的增加或者删除，所以当你需要动态添加/删除属性的时候请使用此方法和 <code>vm.$delete</code>，但请谨慎使用，因为此方法会使得当前 vm 对所有 watcher 进行一次脏检查。</p>
<h3 id="vm-$delete(_key_)">vm.$delete( key )</h3><ul>
<li><strong>key</strong> <code>String</code></li>
</ul>
<p>在 Vue 实例及其 <code>$data</code> 对象中删除一个顶层属性。</p>
<h3 id="vm-$eval(_expression_)">vm.$eval( expression )</h3><ul>
<li><strong>expression</strong> <code>String</code></li>
</ul>
<p>对一个表达式求值，该表达式可以包含过滤器。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 假定 vm.msg = 'hello'</span></span><br><span class="line">vm.$<span class="built_in">eval</span>(<span class="string">'msg | uppercase'</span>) <span class="comment">// -&gt; 'HELLO'</span></span><br></pre></td></tr></table></figure>
<h3 id="vm-$interpolate(_templateString_)">vm.$interpolate( templateString )</h3><ul>
<li><strong>templateString</strong> <code>String</code></li>
</ul>
<p>对一段包含 Mustache 插值的模板字符串进行处理。注意：此方法仅仅处理字符串插值，属性指令不会被编译。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 假定 vm.msg = 'hello'</span></span><br><span class="line">vm.$interpolate(<span class="string">'&#123;&#123;msg&#125;&#125; world!'</span>) <span class="comment">// -&gt; 'hello world!'</span></span><br></pre></td></tr></table></figure>
<h3 id="vm-$log(_[keypath]_)">vm.$log( [keypath] )</h3><ul>
<li><strong>keypath</strong> <code>String</code> <em>optional</em></li>
</ul>
<p>以一个纯对象的方式打印当前实例的数据，比直接打印数据本身更容易在控制台里观察。接受一个可选路径参数。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">vm.$log() <span class="comment">// 打印整个 ViewModel 数据</span></span><br><span class="line">vm.$log(<span class="string">'item'</span>) <span class="comment">// 只打印 vm.item</span></span><br></pre></td></tr></table></figure>
<h2 id="事件系统">事件系统</h2><blockquote>
<p>每个 vm 都是一个事件触发器。当你有多层嵌套的组件时，你可以用事件系统去在它们之间进行通信。</p>
</blockquote>
<h3 id="vm-$dispatch(_event,_[args…]_)">vm.$dispatch( event, [args…] )</h3><ul>
<li><strong>event</strong> <code>String</code></li>
<li><strong>args…</strong> <em>optional</em></li>
</ul>
<p>从当前的 vm 向上传递一个事件，一直到它的 <code>$root</code> 实例为止。如果传递过程中任意一个回调返回了 <code>false</code> ，那么事件会在该回调所属的实例处停止传播。</p>
<h3 id="vm-$broadcast(_event,_[args…]_)">vm.$broadcast( event, [args…] )</h3><ul>
<li><strong>event</strong> <code>String</code></li>
<li><strong>args…</strong> <em>optional</em></li>
</ul>
<p>向当前 vm 的所有子 vm 向下广播该事件。广播会进行深度遍历。如果传递过程中一个回调返回了 <code>false</code>，那么该回调的所属实例就不会继续向下广播这个事件。</p>
<h3 id="vm-$emit(_event,_[args…]_)">vm.$emit( event, [args…] )</h3><ul>
<li><strong>event</strong> <code>String</code></li>
<li><strong>args…</strong> <em>optional</em></li>
</ul>
<p>只在当前 vm 上触发一个事件。</p>
<h3 id="vm-$on(_event,_callback_)">vm.$on( event, callback )</h3><ul>
<li><strong>event</strong> <code>String</code></li>
<li><strong>callback</strong> <code>Function</code></li>
</ul>
<p>在当前 vm 上监听一个事件。</p>
<h3 id="vm-$once(_event,_callback_)">vm.$once( event, callback )</h3><ul>
<li><strong>event</strong> <code>String</code></li>
<li><strong>callback</strong> <code>Function</code></li>
</ul>
<p>在当前 vm 上为此事件绑定一个一次性的监听器。</p>
<h3 id="vm-$off(_[event,_callback]_)">vm.$off( [event, callback] )</h3><ul>
<li><strong>event</strong> <code>String</code> <em>optional</em></li>
<li><strong>callback</strong> <code>Function</code> <em>optional</em></li>
</ul>
<p>如果没有传递参数，那么停止监视所有事件；如果传递了一个事件，那么移除该事件的所有回调；如果事件和回调都被传递，则只移除该回调。</p>
<h2 id="DOM">DOM</h2><blockquote>
<p>vm 的 DOM 操作方法和 jQuery 中的同名方法类似，不同点在于 vm 实例的 DOM 操作方法能够触发 Vue.js 的过渡效果。 关于过渡效果，请参考 <a href="../guide/transitions.html">过渡效果</a>。</p>
</blockquote>
<h3 id="vm-$appendTo(_element|selector,_[callback]_)">vm.$appendTo( element|selector, [callback] )</h3><ul>
<li><strong>element</strong> <code>HTMLElement</code> | <strong>selector</strong> <code>String</code></li>
<li><strong>callback</strong> <code>Function</code> <em>optional</em></li>
</ul>
<p>将 vm 的 <code>$el</code> 插入到目标元素的最后。参数可以是一个元素，或者是一个 querySelector 的选择器。</p>
<h3 id="vm-$before(_element|selector,_[callback]_)">vm.$before( element|selector, [callback] )</h3><ul>
<li><strong>element</strong> <code>HTMLElement</code> | <strong>selector</strong> <code>String</code></li>
<li><strong>callback</strong> <code>Function</code> <em>optional</em></li>
</ul>
<p>在目标元素之前插入 vm 的 <code>$el</code> 。</p>
<h3 id="vm-$after(_element|selector,_[callback]_)">vm.$after( element|selector, [callback] )</h3><ul>
<li><strong>element</strong> <code>HTMLElement</code> | <strong>selector</strong> <code>String</code></li>
<li><strong>callback</strong> <code>Function</code> <em>optional</em></li>
</ul>
<p>在目标元素之后插入 vm 的 <code>$el</code> 。</p>
<h3 id="vm-$remove(_[callback]_)">vm.$remove( [callback] )</h3><ul>
<li><strong>callback</strong> <code>Function</code> <em>optional</em></li>
</ul>
<p>从 DOM 中移除 vm 的 <code>$el</code> 。</p>
<h3 id="vm-$nextTick(_callback_)">vm.$nextTick( callback )</h3><ul>
<li><strong>callback</strong> <code>Function</code></li>
</ul>
<p>延迟回调的执行直到下一次 DOM 更新循环结束。当你改变一些数据之后调用它，当回调触发时 DOM 已经更新完毕。这和全局的 <code>Vue.nextTick</code> 效果相同，只是回调的 <code>this</code> 上下文会自动指向调用此方法的实例。</p>
<h2 id="生命周期">生命周期</h2><h3 id="vm-$mount(_[element|selector]_)">vm.$mount( [element|selector] )</h3><ul>
<li><strong>element</strong> <code>HTMLElement</code> | <strong>selector</strong> <code>String</code> <em>optional</em></li>
</ul>
<p>如果 Vue 实例在实例化的时候没有被传递一个 <code>el</code> 的选项,你可以自己调用 <code>$mount()</code> 来启动编译阶段。默认情况下，被挂载的元素将被实例的模板替代。假如 <code>replace</code> 选项被设置成 <code>false</code>，则模板将会被插入到挂载的元素中并且覆盖其内部的原始内容。除非模板包含 <code>&lt;content&gt;</code> 出口，否则原始内容会被丢弃。</p>
<p>如果没有提供参数，模板将会被生成为一个文档之外的元素，并且你需要亲自使用 DOM 实例方法把它插入到文档里。如果 <code>replace</code> 选项被设置成 <code>false</code> ，那么就会自动生成一个空的 <code>&lt;div&gt;</code> 作为封装元素。在已经被挂载的实例上调用 <code>$mount()</code> 上是没有作用的。这个方法会返回实例本身，所以如果你可以配合其他实例方法进行链式调用。</p>
<h3 id="vm-$destroy(_[remove]_)">vm.$destroy( [remove] )</h3><ul>
<li><strong>remove</strong> <code>Boolean</code> <em>optional</em> (默认值: <code>false</code>)</li>
</ul>
<p>完全销毁一个 vm。清除它与其他 vm 的关联，解除所有指令的绑定。并可选地从DOM中移除它的 <code>$el</code>。同时，所有的 <code>$on</code> 和 <code>$watch</code> 监听器也都会被自动移除。</p>
<h3 id="vm-$compile(_element_)">vm.$compile( element )</h3><ul>
<li><strong>element</strong> <code>HTMLElement</code></li>
</ul>
<p>局部编译一块 DOM (元素或者是文档片段)。此方法返回一个 <code>decompile</code> 函数，用来清理编译过程中生成的指令。注意 decompile 函数不会移除被编译的 DOM。这个方法主要是为高级插件的编写者提供的。</p>
<h3 id="vm-$addChild(_[options,_constructor]_)">vm.$addChild( [options, constructor] )</h3><ul>
<li><strong>options</strong> <code>Object</code> <em>optional</em></li>
<li><strong>constructor</strong> <code>Function</code> <em>optional</em></li>
</ul>
<p>为当前的实例增加一个子实例。选项对象和手动实例化时所用的选项是相同的。额外还可以传递一个用 <code>Vue.extend()</code> 创造的构造函数。</p>
<p>实例之间的父子关系有三个含义：</p>
<ol>
<li>父实例和子实例可以通过<a href="#事件系统">事件系统</a>来通信。</li>
<li>子实例可以访问父实例的所有资源（比如：自定义指令）。但在严格模式下这一条会被禁止。</li>
<li>如果是继承了父实例作用域的子实例，也可以访问父实例的数据属性。</li>
</ol>

    <div class="footer">发现了问题或想要贡献？来 Github 给 Vue.js <a href="https://github.com/vuejs/vuejs.org" target="_blank">英文站点</a>或<a href="https://github.com/Jinjiang/vuejs.org/tree/lang-zh" target="_blank">中文翻译</a>来个 Fork 吧！</div>
</div>
                
            </div>
            <script src="/js/smooth-scroll.min.js"></script>
            <script src="/js/common.js"></script>
        

        <script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script><script src="https://cdn.jsdelivr.net/gh/shentao/vuejs-outdated-docs-modal@v1.3/prompt.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        </script>
    </body>
</html>
